<template>
    <div class="input-range">
        <input type="text" :value="modelValue && modelValue[0]" placeholder="请输入" @input="inputMin" @blur="blur">
        {{ rangeSeparator }}
        <input type="text" :value="modelValue && modelValue[1]" placeholder="请输入" @input="inputMax" @blur="blur">
    </div>
</template>

<script setup>
import { watch } from 'vue';
const props = defineProps({
    rangeSeparator: {
        type: String,
        default: '—'
    },
    modelValue: {
        type: Array,
        required:true
    },
});
const emit = defineEmits(['update:modelValue', 'change']);
const blur = () => {
    if (props.modelValue[0] && props.modelValue[1]) {
        emit('change');
    }
}
const inputMin = (e) => {
    emit('update:modelValue', [e.target.value, props.modelValue[1]])
}
const inputMax = (e) => {
    emit('update:modelValue', [props.modelValue[0], e.target.value])
}
watch(() => props.modelValue, (newV) => {
    if (!newV) {
        emit('update:modelValue', ['', '']);
    }
}, { immediate: true })
</script>

<style lang="scss" scoped>
.input-range {
    height: 32px;
    background: #F6F8FA;
    display: inline-flex;
    flex: 1;
    justify-content: space-between;

    input {
        border: none;
        outline: none;
        background: none;
        padding: 0 11px;
        box-sizing: border-box;
        color: #606266;
        width: 50%;
        text-align: center;

        &::placeholder {
            color: #b8abb2;
        }
    }

}
</style>